<template>
  <div style="height:100%" class="g-fd-c">
    <m-attr-tip :type="tipType" :propertyGroupConfig="filterDataList[activeIndex] && filterDataList[activeIndex]['config']" class="g-flex-0" />
    <div class="attribute ov g-flex-1" >
      <div class="attr-left">
        <attr-nav
          :dataList="filterDataList"
          :activeIndex="activeIndex"
          @click="handleClick"
        >
        </attr-nav>
      </div>
      <div class="attr-right">
        <keep-alive>
          <component 
            :is="componentType" 
            mode="detail" 
            :elementId="elementId" 
            :propertyGroupConfig="filterDataList[activeIndex] && filterDataList[activeIndex]['config']" 
            :property="filterDataList[activeIndex] && filterDataList[activeIndex]['property']"
            style="height:100%"></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
import FlowTable from './FlowTable';
import AttrList from './AttrList';
import AttrNav from './AttrNav';
import AttrTip from '../comps/AttrTip';
import AttrTable from '../comps/AttrTable';
import AttrSlots from '../comps/AttrSlots';
import AttrConstraint from '../comps/AttrConstraint';
import { SysMLUtilHelper } from 'src/api/sysml-imports';

const dataList = [
  { name: "基础属性", key: 'AttrList', value: "Block", type: "attribute", id: 'AttrList' },
  { name: "约束", key: 'AttrConstraint', value: "", type: "attrConstraint", id: 'AttrConstraint' },
  { name: "插槽", key: 'AttrSlots', value: "", type: "attrSlots", id: 'AttrSlots', hidden: true }
  //// { name: "属性分组", key: 'AttrTable', value: "Block", type: "propertyGroup" }
  /* { name: "约束属性", key: '', value: "", type: "settingsAttribute" },
  { name: "流属性", key: 'FlowTable', value: "FlowProperty", type: "settingsAttribute" },
  { name: "部件属性", key: '', value: "", type: "settingsAttribute" },
  { name: "引用属性", key: '', value: "", type: "settingsAttribute" },
  { name: "约束表达式", key: '', value: "", type: "settingsAttribute" },
  { name: "操作", key: '', value: "", type: "settingsAttribute" },
  { name: "接收", key: '', value: "", type: "settingsAttribute" },
  { name: "端口", key: '', value: "", type: "settingsAttribute" },
  { name: "流端口", key: '', value: "", type: "settingsAttribute" },
  { name: "完整端口", key: '', value: "", type: "settingsAttribute" },
  { name: "值属性", key: '', value: "", type: "settingsAttribute" } */
];

export default {
  name: 'attribute',
  components: {
    FlowTable,
    AttrList,
    AttrTable,
    AttrConstraint,
    AttrSlots,
    "attr-nav": AttrNav,
    'm-attr-tip': AttrTip,
  },
  props: {
    elementId: String

  },
  data() {
    return {
      dataList: [],
      activeIndex: 0,
    };
  },
  computed: {
    componentType() {
      let type = this.filterDataList[this.activeIndex].key;
      return type;
    },
    tipType() {
      let type = this.filterDataList[this.activeIndex].type;
      return type;
    },
    selectedElement(){
      return app.selectedElement;
    },
    filterDataList() {
      return this.dataList.filter(item => !item.hidden);
    }
  },
  watch: {
    selectedElement: function handle(val) {
      this.getPropertyGroupConfig();
      this.showSlots();
    }
  },
  created() {
    this.getPropertyGroupConfig();
    this.showSlots();
  },
  methods: {
    getPropertyGroupConfig() {
      if (!app.selectedElement) return;
      const type = app.selectedElement.getTypeName();
      const propertyGroupConfig = app.activeProject.configManager.getPropertyGroupConfig()[type] || [];
      const selectedElementProperties = app.selectedElement.properties.toArray();
      const propertyObj = {};
      selectedElementProperties.forEach((item, index) => {
        propertyObj[item.config.getMethod] = item;
      });
      const navList = [];
      propertyGroupConfig.forEach(config => {
        const navItem = {
          name: config.name, 
          key: 'AttrTable', 
          value: type, 
          type: "propertyGroup",
          id: config.id,
          property: propertyObj[config.propertyKey],
          config
        };
        navList.push(navItem);
      });      
      this.dataList = dataList.concat(navList);
      if (this.activeIndex > this.dataList.length - 1) {
        this.activeIndex = 0;
      }
      console.log('propertyGroupConfig', type, propertyGroupConfig);
    },

    //// 显示插槽
    showSlots() {
      if (this.selectedElement) {
        const type = this.selectedElement.getTypeName();
        const index = this.dataList.findIndex(item => item.id === 'AttrSlots');
        if (type === 'InstanceSpecification' || type === 'Instance') {
          this.$set(this.dataList[index], 'hidden', false);
        } else {
          this.$set(this.dataList[index], 'hidden', true);
          this.activeIndex = 0;
        }
      }
    },

    handleClick(index) {

      this.activeIndex = index;
    },
    //// handleNumClick(value) {
    ////   value === 0 ? this.activeIndex ++ : this.activeIndex--
    ////   if( this.activeIndex <= 0 ) {
    ////     this.activeIndex = 0
    ////   }else if( this.activeIndex >= this.dataList.length -1  ) {
    ////     this.activeIndex = this.dataList.length -1
    ////   }
    //// }
  },
};
</script>
<style lang="scss" scoped>
.attribute {
  position: relative;
  .attr-left {
    float: left;
    height: 100%;
    width: 195px;
  }
  .attr-right {
    height: 100%;
    overflow: hidden;
  }
}
</style>
